<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告通知</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
    <style>
        #roleAuthTable + .layui-table-view .layui-table tbody tr:hover {
            background-color: transparent;
        }
        .layui-form-item .layui-input-inline{
            width: 250px;
        }
        .must{
            color: red;
        }
        .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }
        .handle i {
            margin-right: 5px;
        }
        .handle i:hover {
            cursor: pointer;
        }
        .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">关键字</label>
                        <div class="layui-input-inline mr0">
                            <input id="search_word" class="layui-input" type="text" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="btnReset" class="layui-btn layui-btn-warm"><i class="layui-icon">&#xe669;</i>重置
                        </button>
                        <button id="btnAdd" class="layui-btn layui-btn-normal icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="infoTable" lay-filter="infoTable"></table>
        </div>
    </div>
</div>

<!-- 表格状态列 -->
<script type="text/html" id="infoTbaleState">
    <input type="checkbox" lay-filter="ckState" lay-skin="switch" lay-text="开启|关闭"
           value="{{d.id}}" {{d.state==1?'checked':''}}/>
</script>
<!--新增修改-->
<script type="text/html" id="modifyForm">
    <form lay-filter="modifyForm" class="layui-form model-form">
        <input name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="must">*</span>通知范围</label>
            <div class="layui-input-block">
                <select name="user_type" lay-search lay-verify="required" required>
                    <option value="0">全部用户</option>
                    <option value="1">鸿天员工</option>
                    <option value="2">供货商</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="must">*</span>标题</label>
            <div class="layui-input-block">
                <input name="notice_title" placeholder="请输入标题" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label"><span class="must">*</span>内容</label>
            <div class="layui-input-block">
                <textarea name="content" class="layui-textarea" style="height: 200px"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">上传图片</button>
                    <blockquote>
                        <div class="layui-upload-list"  style="margin: 30px 10px;" id="demo2"></div>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-center" style="margin-top: 15px">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" lay-filter="modifyFormSubmit" lay-submit class="layui-btn">确认</button>
        </div>
    </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="orderTableBar">
    <a class="layui-btn-a" lay-event="edit">修改</a>
    <a class="layui-btn-a btn-red" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table','admin', 'config','upload','layedit'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var config = layui.config;
        var upload = layui.upload;
        var resultImage = [];
        var file_index = 0;
        form.render();
        // 渲染表格
        table.render({
            elem: '#infoTable',
            url: access_baseurl+'Notice/getList.html',
            method:'POST',
            where: {},
            page: true,
            id:'infoTable',
            cols: [[
                {field: 'notice_title', title: '标题'},
                {field: 'content',title: '内容'},
                {align: 'center', field: 'add_datetime',title: '创建时间'},
                {align: 'center', field: 'user_type',title: '通知范围',templet:function (d) {
                        if(d.user_type == 1){
                            return '鸿天员工';
                        }else if(d.user_type == 2){
                            return '供货商';
                        }else {
                            return '全部用户'
                        }
                    }},
                {align: 'center', toolbar: '#infoTbaleState',width:120, title: '显示'},
                {align: 'center',toolbar: '#orderTableBar',title: '操作',width:170,fixed: 'right'}
            ]],
            done: function (res, curr, count) {
            }

        });
        $('#btnAdd').click(function () {
            showForm();
        });

        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var where = getWhere();
            table.reload('infoTable', {where: where});
        });

        $('#btnReset').click(function () {
            $('#search_word').val('');
            form.render();
            var where = getWhere();
            table.reload('infoTable', {where:where});
        });

        // 工具条点击事件
        table.on('tool(infoTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'edit'){
                showForm(data);
            }else if(layEvent === 'del'){
                layer.confirm('确定删除吗？', {
                    skin: 'layui-layer-admin'
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    var where = getWhere();
                    send_req( 'Notice/del', {id:data.id}, function (res) {
                    layer.closeAll('loading');
                        layer.msg('删除成功', {icon: 1});
                        var where = getWhere();
                        table.reload('infoTable', {where: where});
                    });
                    return false;
                });
            }
        });

        // 表单提交
        function showForm(data) {
            admin.open({
                type: 1,
                area: '700px',
                offset: '65px',
                shadeClose: true,
                title: data?"修改通知信息":"添加通知信息",
                content: $('#modifyForm').html(),
                success: function (layero, index) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    uploadImgs()
                    resultImage = data.pic_urls;
                    if(resultImage.length>0){
                        for (var i=0; i<resultImage.length;i++){
                            $('#demo2').append( '<div class="file-iteme">' +
                                '<div class="handle" id='+i+'><i class="layui-icon layui-icon-delete"></i></div>' +
                                '<img class="imgs" style="width: 100px;height: 100px;" src='+ resultImage[i] +'>' +
                                '<div class="info"></div>' +
                                '</div>');
                        }
                    }
                    if(data){
                        form.val('modifyForm', data);
                    }
                    form.render();
                }
            });
            return false;
        }

        form.on('submit(modifyFormSubmit)', function (d) {
            var param = d.field;
            param.pic_urls=resultImage.length>0?resultImage.join(','):'';

            if(param.notice_title == "" || !param.notice_title){
                layer.msg("请输入标题！");
            }
            else if(param.content == "" || !param.content){
                layer.msg("请输入通知内容！");
            }
            else{
                send_req('Notice/modify', param, function (res) {
                    layer.msg("操作成功", {icon: 1,time:1000});
                    layer.closeAll('loading');
                    layer.closeAll('page');
                    table.reload('infoTable');
                });
            }
            return false;
        });

        // 修改状态
        form.on('switch(ckState)', function (obj) {
            layer.load(2);
            send_req('Notice/changeState', {
                id: obj.elem.value,
                state: obj.elem.checked ? 1 : 0
            }, function (data) {
                layer.msg('操作成功', {icon: 1});
                layer.closeAll('loading');
                table.reload('infoTable');
            });
            return false;
        });


        function getWhere() {
            var search_word = $('#search_word').val();
            var where = {
                search_word:search_word
            };
            return where;
        }

        // 图片样式
        $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });
        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            var index = $(this).context.id;
            $(this).parent().remove();
            resultImage.splice(index,1);
            return false;
        });

        $(document).off('click','.imgs').on("click", ".imgs", function(event){
            var imgSrc = $(this).attr("src");
            window.parent.open_pic_url(imgSrc);
            return false;
        });

        function uploadImgs(){
            upload.render({
                elem: '#test2'
                ,url: access_baseurl + 'File/uploadImg' //改成您自己的上传接口
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo2').append( '<div class="file-iteme">' +
                            '<div class="handle" id='+file_index+'><i class="layui-icon layui-icon-delete"></i></div>' +
                            '<img class="imgs" style="width: auto;height: 50px;" src='+ result +'>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>');
                    });
                }
                ,done: function(res){
                    //上传完毕
                    if(res.success){
                        file_index += 1;
                        resultImage.push(res.obj.file);
                        return false;
                    }
                }
            });
        }
    });
</script>
</body>
</html>